<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<f:view>

	<h:head>
		<title>Carteira de Projetos</title>
		<h:outputStylesheet name="main.css" library="css" />
		<h:outputScript library="js" name="main.js" />
		<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
		<f:facet name="first">
	    	<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
		</f:facet>
	</h:head>
	

	<h:body>

		<h:form id="formulario">

			<p:growl id="msg" life="5000" />

			<p:dialog modal="true" widgetVar="statusDialog" header="Atualizando, aguarde...">
				<p:graphicImage value="../resources/images/redBar.gif" />
			</p:dialog>

			<div id="head">
			
				<p:commandButton styleClass="carteiraOld" value="Atualizar"
					icon="ui-icon-refresh" onstart="PF('statusDialog').show();" onsuccess="PF('statusDialog').hide();"
					action="#{carteiraBean.refresh}" />
				
				<p:commandButton styleClass="carteiraOld" value="Carteira.old"
					icon="ui-icon-script" type="submit"
					action="#{carteiraBean.carteiraOld}" />
			
				Average Tecnologia - Carteira de Projetos

				<p:commandButton styleClass="filtro" value="Filtrar"
					icon="ui-icon-search" action="#{carteiraBean.updateCharts}"
					update="msg" />

				<p:selectOneMenu value="#{carteiraBean.maxProjs}"
					styleClass="gerentes numProj">
					<f:selectItem itemLabel="10" itemValue="10" />
					<f:selectItem itemLabel="20" itemValue="20" />
					<f:selectItem itemLabel="30" itemValue="30" />
				</p:selectOneMenu>

				<p:selectCheckboxMenu id="projetos" styleClass="gerentes"
					value="#{carteiraBean.projetosSelecionados}" label="Projetos"
					filter="true" filterText="Filter" filterMatchMode="startsWith">
					<f:selectItems value="#{carteiraBean.projetosFiltro}" />
				</p:selectCheckboxMenu>

				<p:selectCheckboxMenu id="gerentes" styleClass="gerentes"
					value="#{carteiraBean.gerentesSelecionados}" label="Gerentes"
					filter="true" filterText="Filter" filterMatchMode="startsWith"
					valueChangeListener="#{carteiraBean.popularProjetosFiltro}">
					<p:ajax listener="#{carteiraBean.popularProjetosFiltro}"
						update="projetos" />
					<f:selectItems value="#{carteiraBean.gerentesFiltro}" />
				</p:selectCheckboxMenu>


			</div>

			<div id="main_content">
			
				<div
					style="float: right; font-size: 11px; color:#666666">
					*O filtro numérico irá limitar a quantidade máxima de projetos a serem exibidos nos gráficos.
				</div>

				<h1 class="titleCarteira">Carteira de Projetos</h1>

				<p:lineChart id="variacaoLucroHoras" xaxisAngle="35" 
					legendPosition="ne" datatipFormat="#{carteiraBean.getDatatipFormat()}"
					value="#{carteiraBean.variacaoLucroHoras.variacaoLucroHorasChart}"
					zoom="true" animate="true" seriesColors="E05953, 5390E0"
					title="% (ENT-VEN)/VEN"
					minY="#{carteiraBean.variacaoLucroHoras.min}"
					maxY="#{carteiraBean.variacaoLucroHoras.max}"
					style="width:1230px; margin-left: 20px; float:left; height:600px;" />
					
				
				<!-- 
					<div
						style="width: 150px; background-color: #D9D9D9; float: left; border: solid 1px; margin-left: 20px;">
	
						<div
							style="padding-left: 3px; background-color: #9E9E9E; font-weight: bold; border-bottom: solid 1px;">FAQ</div>
						Variação do lucro positiva => Significa que estimamos faturar ao
						final do projeto X% a mais do que o previsto inicialmente
	
					</div>
				-->

				<p:separator styleClass="separator" />
				
				<h:panelGroup id="panel" binding="#{carteiraBean.panelGroup}" />
				
				<p:separator styleClass="separator" />

				<p:barChart id="lucroPrevisto" zoom="true" legendPosition="ne"
					extender="extFillToZero" datatipFormat="#{carteiraBean.getDatatipFormat()}"
					value="#{carteiraBean.lucroPrevisto.lucroPrevistoChart}"
					seriesColors="5390E0, E05953" xaxisAngle="35"
					title="Lucro Previsto na venda x Lucro Previsto ao término"
					minY="#{carteiraBean.lucroPrevisto.min}"
					maxY="#{carteiraBean.lucroPrevisto.max}" animate="true"
					style="width:1230px; margin-left: 20px; float:left; height:600px;" />

				<!-- 
					<p:separator styleClass="separator" />
				
    				<h:panelGroup id="panel2" binding="#{carteiraBean.panelGroup2}" />
       			-->
				
				<p:separator styleClass="separator" />
				
				<p:barChart id="qtdeHoras" zoom="true" legendPosition="ne"
					datatipFormat="#{carteiraBean.getDatatipFormat()}"
					value="#{carteiraBean.qtdeHoras.qtdeHorasChart}"
					seriesColors="5390E0, 9dbceb" xaxisAngle="35"
					title="Quantidade de Horas prevista na venda x Estimado ao término"
					maxY="#{carteiraBean.qtdeHoras.max}" animate="true"
					style="width:1230px; margin-left: 20px; float:left; height:600px;" />
				
				
				<!-- 
					<p:separator styleClass="separator" />
				
    				<h:panelGroup id="panel3" binding="#{carteiraBean.panelGroup3}" />
       			-->
				
				<p:separator styleClass="separator" />
				
				<p:spacer height="10" />
				
			</div>

		</h:form>
	</h:body>

</f:view>

</html>